<template>
  <view>
    <!-- 输入框 -->
    <template v-if="currentFildData.type === 'input'">
      <!-- 输入框 -->
      <uni-easyinput
        type="text"
        v-model="currentForm[currentFildData.field]"
        :trim="true"
        class="form_item"
        :placeholder="currentFildData.placeholder ? currentFildData.placeholder : currentFildData.label"
        @iconClick="inputIconBtnClick(currentForm[currentFildData.field])"
        v-bind="currentFildData.options" />
    </template>
    <template v-else-if="currentFildData.type === 'select'">
      <uni-data-select
        class="form_item"
        v-model="currentForm[currentFildData.field]"
        :localdata="currentFildData.dataList"
        @change="formItemChange"
        :placeholder="currentFildData.placeholder ? currentFildData.placeholder : currentFildData.label" />
    </template>
    <template v-else-if="currentFildData.type === 'selectPopup'">
      <view><IFormSelect :formField="formField" :currentFildData="currentFildData"></IFormSelect></view>
    </template>
    <!-- 单选框 -->
    <template v-else-if="currentFildData.type === 'radio'">
      <uni-data-checkbox v-model="currentForm[currentFildData.field]" :localdata="currentFildData.dataList" v-bind="currentFildData.options" @change="formItemChange" />
    </template>
    <!-- 复选框 -->
    <template v-else-if="currentFildData.type === 'checkbox'">
      <uni-data-checkbox multiple v-model="currentForm[currentFildData.field]" :localdata="currentFildData.dataList" v-bind="currentFildData.options" @change="formItemChange" />
    </template>
    <!-- 各种时间 -->
    <template v-else-if="currentFildData.type === 'time'">
      <!-- date/daterange/datetime/datetimerange -->
      <uni-datetime-picker type="datetime" return-type="timestamp" v-model="currentForm[currentFildData.field]" @change="formItemChange" v-bind="currentFildData.options" />
    </template>
    <!-- 日历 -->
    <template v-else-if="currentFildData.type === 'calendar'">
      <view><IFormCalendar :formField="formField" :currentFildData="currentFildData"></IFormCalendar></view>
    </template>
    <!-- 下拉组合 -->
    <template v-else-if="currentFildData.type === 'candidates'">
      <uni-combox
        :candidates="currentFildData.dataList"
        class="form_item"
        :placeholder="currentFildData.placeholder ? currentFildData.placeholder : currentFildData.label"
        v-model="currentForm[currentFildData.field]"
        v-bind="currentFildData.options"></uni-combox>
    </template>
    <!-- 级联 -->
    <template v-else-if="currentFildData.type === 'cascader'">
      <uni-data-picker
        class="form_item"
        :placeholder="currentFildData.placeholder ? currentFildData.placeholder : currentFildData.label"
        :popup-title="'请选择' + (currentFildData.placeholder ? currentFildData.placeholder : currentFildData.label)"
        :localdata="currentFildData.dataList"
        v-model="currentForm[currentFildData.field]"
        @change="formItemChange"
        @nodeclick="formItemChange"
        v-bind="currentFildData.options"></uni-data-picker>
    </template>
    <template v-else-if="currentFildData.type === 'inputNumber'">
      <uni-number-box v-model="currentForm[currentFildData.field]" @blur="formItemChange" @focus="formItemChange" @change="formItemChange" v-bind="currentFildData.options" />
    </template>
  </view>
</template>

<script setup lang="ts" name="IFormItem">
import { FieldListInterFace, FormDataInterFace } from '#/form/IForm';
import { computed, ref, PropType } from 'vue';
import IFormSelect from './components/IFormSelect.vue';
import IFormCalendar from './components/IFormCalendar.vue';
const props = defineProps({
  formField: {
    type: Object as PropType<FormDataInterFace>,
    required: true
  },
  currentFildData: {
    type: Object as PropType<FieldListInterFace>,
    required: true
  }
});
const currentForm: FormDataInterFace = computed(() => props.formField);
const inputIconBtnClick = (value: string) => props.currentFildData.callback && props.currentFildData.callback(value, currentForm.value);
const formItemChange = (value: string) => props.currentFildData.callback && props.currentFildData.callback(value, currentForm.value);

const emit = defineEmits<{
  (event: 'changeSelectFun', data: any): void;
  (event: any, data: any): void;
}>();
</script>

<style scoped lang="scss">
::v-deep .checklist-text {
  line-height: 55rpx !important;
}
.form_item {
  background: #ffffff !important;
  ::v-deep .is-disabled {
    background: #ffffff !important;
    pointer-events: none;
    color: #666;
  }
}
</style>
